// 头部导航栏模块
// 隐藏购物车模块
; (function () {
  const close = document.querySelector('.toutiao-close')
  const data = [
    {
      src: 'https://yanxuan-item.nosdn.127.net/a5d745bbe067ca2468cdb2948f4f10ca.jpg',
      name: '麦瑞克家用轻音智能多功能彩屏跑步机S450',
      dec: '规格：多功能 款式：蓝屏',
      price: '2303.00',
      count: '1',
    },
    {
      src: 'https://yanxuan-item.nosdn.127.net/a5d745bbe067ca2468cdb2948f4f10ca.jpg',
      name: '麦瑞克家用轻音智能多功能彩屏跑步机S450',
      dec: '规格：多功能 款式：蓝屏',
      price: '2303.00',
      count: '1',
    },
    {
      src: 'https://yanxuan-item.nosdn.127.net/a5d745bbe067ca2468cdb2948f4f10ca.jpg',
      name: '麦瑞克家用轻音智能多功能彩屏跑步机S450',
      dec: '规格：多功能 款式：蓝屏',
      price: '2303.00',
      count: '1',
    },
  ]
  const shopCarList = JSON.parse(localStorage.getItem('shopCarList')) || []
  const ul = document.querySelector('.top ul')
  if (shopCarList.length > 0) {
    render()
  }

  function render() {
    const ul = document.querySelector('.top ul')

    let str = ''
    const shopCarList = JSON.parse(localStorage.getItem('shopCarList')) || []
    for (let i = 0; i < shopCarList.length; i++) {
      const { picture, desc, price, style, number } = shopCarList[i]
      str += `
    <li>
                        <div class="pho">
                          <img src=${picture} alt="" />
                        </div>
                        <!-- 中间文字盒子 -->
                        <div class="text">
                          <span id="title">${desc}</span>
                          <span id="dec">${style}</span>
                        </div>
                        <!-- 右侧价格盒子 -->
                        <div id="count-right">

                          <span id="price">${price}</span>
                          <span>x${number}</span>
                        </div>
                        <div id="close">
                          <i class="toutiao" id="toutiao-close" data-index='${i}'>&#xe604;</i>
                        </div>
                      </li>

    `
    }
    console.log(ul, str)
    ul.innerHTML = str
    bindEvent()
    getSum()
  }
  window.renderShop = render

  function getSum() {
    const shopCarList = JSON.parse(localStorage.getItem('shopCarList')) || []
    let obj = shopCarList.reduce((prev, next) => {
      prev.goodsLength += +next.number
      prev.totalSum += +next.number * +next.price
      return prev
    }, {
      goodsLength: 0,
      totalSum: 0,
    })
    // console.log(obj)
    document.querySelector('#count').innerHTML = obj.goodsLength
    document.querySelector('#bottom .total .title').innerHTML = `共${obj.goodsLength}件商品`
    document.querySelector('#bottom .total .price').innerHTML = `￥${obj.totalSum}`
  }


  // title.innerHTML = `共${shopCarList.length}件商品`

  ul.addEventListener('click', function (e) {
    if (e.target.tagName === 'I') {
      let index = e.target.dataset.index
      const shopCarList = JSON.parse(localStorage.getItem('shopCarList')) || []
      shopCarList.splice(index, 1)
      localStorage.setItem('shopCarList', JSON.stringify(shopCarList))
      render()

    }
  })


  function bindEvent() {
    [...ul.children].forEach(item => {
      item.addEventListener('mouseenter', () => {
        console.log(item.querySelector('#close'))
        item.querySelector('#close').style.display = 'inline-block'
      })
      item.addEventListener('mouseleave', () => {
        item.querySelector('#close').style.display = 'none'
      })
    })
  }
  bindEvent()
  window.bindEvent = bindEvent



})()


  ; (function () {
    const shopCar = document.querySelector('#gouwuche')
    const noneShop = document.querySelector('.none-shop')
    const divShop = document.querySelector('#none-shop')
    const input = document.querySelector('#input')
    const count = document.querySelector('#count')

    shopCar.onclick = function () {
      location.href = '../html/shoppingCart.html'
    }

    input.addEventListener('click', function () {
      location.href = '../html/shoppingCart.html'
    })
    const mimas = localStorage.getItem('mima')
    if (mimas) {
      divShop.addEventListener('mouseenter', function () {
        if (count.innerHTML === '0') {
          return
        }
        noneShop.classList.remove('active')
      })
    }
    divShop.addEventListener('mouseleave', function () {
      noneShop.classList.add('active')
    })

  })()



  ; (function () {
    const nav = document.querySelector('.none-nav')
    window.addEventListener('scroll', function () {
      const distance = document.documentElement.scrollTop
      if (distance > 184) {
        nav.classList.remove('active')
      } else {
        nav.classList.add('active')
      }
    })
  })()
  ; (function () {
    const brand = document.querySelector('#brand')
    const theme = document.querySelector('#theme')

    function click(a) {
      a.onclick = function () {
        location.href = '../index.html'
        document.documentElement.scrollTo({
          top: 200,
          behavior: 'smooth',
        })

        // document.documentElement.scrollTop = 0
      }
    }
    click(brand)
    click(theme)
  })()
